<template>
  <a-modal
    v-model:open="visible"
    title="导入数据"
    width="500px"
    @ok="handleImport"
    @cancel="handleCancel"
  >
    <div class="import-info">
      <p><strong>导入位置:</strong> {{ getCategoryName(primaryCategory) }}</p>
    </div>

    <a-form layout="vertical">
      <a-form-item label="导入类型">
        <a-radio-group v-model:value="importType">
          <a-radio value="add">新增消费</a-radio>
          <a-radio value="modify">修改消费</a-radio>
        </a-radio-group>
        <div class="template-link">
          <a @click="downloadTemplate">下载空模板</a>
        </div>
      </a-form-item>

      <a-form-item label="上传文件">
        <a-upload
          v-model:file-list="fileList"
          :before-upload="beforeUpload"
          :multiple="false"
          accept=".xlsx,.xls,.csv"
        >
          <a-button>
            <template #icon><Upload /></template>
            选择文件
          </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { message } from 'ant-design-vue';
import { Upload } from '@vben/icons';

// 定义props
interface Props {
  visible: boolean;
  primaryCategory: string;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  primaryCategory: 'registration',
});

// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean];
  import: [data: any]
}>();

// 响应式数据
const importType = ref('add');
const fileList = ref([]);

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

// 方法
const getCategoryName = (category: string) => {
  const categoryMap: Record<string, string> = {
    registration: '挂号',
    prescription: '处方',
    inspection: '检验',
    imaging: '影像',
    treatment: '处置',
    surgery: '手术',
    inpatient: '住院',
    boarding: '寄养',
    vaccine: '疫苗',
    deworming: '驱虫',
    beauty: '美容',
    goods: '商品',
  };
  return categoryMap[category] || category;
};

const downloadTemplate = () => {
  message.success('模板下载成功');
};

const beforeUpload = (file: File) => {
  const isValidType =
    file.type ===
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    file.type === 'application/vnd.ms-excel' ||
    file.type === 'text/csv';

  if (!isValidType) {
    message.error('只能上传 Excel 或 CSV 文件!');
    return false;
  }

  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('文件大小不能超过 2MB!');
    return false;
  }

  return false; // 阻止自动上传
};

const handleImport = () => {
  if (fileList.value.length === 0) {
    message.warning('请选择要导入的文件');
    return;
  }

  // 模拟导入处理
  message.success('导入成功');
  emit('import', {
    type: importType.value,
    file: fileList.value[0],
    category: props.primaryCategory,
  });
  visible.value = false;
};

const handleCancel = () => {
  visible.value = false;
  fileList.value = [];
};
</script>

<style scoped>
.import-info {
  padding: 12px;
  margin-bottom: 16px;
  background: #f5f5f5;
  border-radius: 4px;
}

.template-link {
  margin-top: 8px;
}
</style>
